<template>
	<view class="rankingPage">
		<view @click="back()" class="top-wrap" :style="{paddingTop:statusBarHeight + 'px',height:`calc(${navHeight}px)`}">
			<u-icon name="arrow-left" color="#fff" size="24"></u-icon>
			<text class="title">排行榜</text>
			<u-icon name="arrow-left" color="transparent" size="24"></u-icon>
		</view>
		<view class="tit">排行榜</view>
		
		<view class="card">
			<view class="rankTop">
				<!-- group1 -->
				<view  v-for="(item,index) in group1" :key="index">
					<view class="rank rank1" v-if="index==1">
						<view class="img">
							<image class="logo" :src="fileServer+item.headImg" mode="aspectFill"></image>
							<image src="../../../static/img/rank2.png" mode="widthFix" class="rank_img"></image>
						</view>
						<view class="name">{{item.name}}</view>
						<view class="num">{{item.lxNum||0}}人</view>
					</view>
					<view class="rank rank2" v-if="index==0">
						<view class="img">
							<image class="logo" :src="fileServer+item.headImg" mode="aspectFill"></image>
							<image src="../../../static/img/rank1.png" mode="widthFix" class="rank_img"></image>
						</view>
						<view class="name">{{item.name}}</view>
						<view class="num">{{item.lxNum||0}}人</view>
					</view>
					<view class="rank rank3" v-if="index==2">
						<view class="img">
							<image class="logo" :src="fileServer+item.headImg" mode="aspectFill"></image>
							<image src="../../../static/img/rank3.png" mode="widthFix" class="rank_img"></image>
						</view>
						<view class="name">{{item.name}}</view>
						<view class="num">{{item.lxNum||0}}人</view>
					</view>
				</view>
				
			</view>
			<view class="table" v-if="group2.length">
				<text class="ranknum">排名</text>
				<text class="name">用户名</text>
				<text class="ynum">邀请人数</text>
			</view>
			<view class="list">
				<view class="item" v-for="(item,index) in group2" :key="index">
					<text class="ranknum">{{index+4}}</text>
					<view class="info">
						<image class="logo" :src="fileServer+item.headImg" mode="aspectFill"></image>
						<text>{{item.name}}</text>
					</view>
					<text class="ynum">{{item.lxNum||0}}人</text>
				</view>
			</view>
		</view>
		<u-empty v-if="status!='loading'&&list.length==0"
		        mode="data" textColor="#fff"
		        icon="http://cdn.uviewui.com/uview/empty/list.png"
		>
		</u-empty>
		<u-loadmore color="#fff" :status="status" v-else />


	</view>
</template>

<script>
	export default {
		data() {
			return {
				fileServer: this.$fileServer,
				statusBarHeight:0,
				navHeight: 0,
				list:[],
				status:'loading',//loading / nomore
				pageIndex:1,
				total:0,
				group1:[],
				group2:[],
			}
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			let statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			const custom = wx.getMenuButtonBoundingClientRect()

			let navigationBarHeight = custom.height + (custom.top - statusBarHeight) * 2
			this.navHeight = navigationBarHeight + statusBarHeight
			this.statusBarHeight = statusBarHeight;
			// #endif
			
			this.getList();
		},
		methods: {
			getList(){
				// 
				this.status = 'loading';
				let pageIndex = this.pageIndex;
				this.$api.company.huokePaihang({pageIndex}).then(res => {
					uni.stopPullDownRefresh(); // 关闭下拉刷新 
					if(res.code==200){
						let list = res.rows;
						if(pageIndex==1){
							this.list = list
						}else{
							this.list = this.list.concat(list)
						}
						let lists = JSON.parse(JSON.stringify(this.list))
						const group1 = lists.slice(0, 3);
						const group2 = lists.slice(3);
						this.group1 = group1
						this.group2 = group2
						
						this.total = res.total;
						if(this.list.length<res.total){
							this.status = 'loadmore';
						}else{
							this.status = 'nomore';
						}
					}
				})
			},
			
			back(){
				uni.navigateBack()
			},
		},
		//上拉加载
		onReachBottom() {
			if(this.status == 'nomore'){
				return false
			}
			this.pageIndex++;
			this.getList();
		},
		onPullDownRefresh () {
		  this.pageIndex = 1;
		  this.getList();
		},
	}
</script>

<style lang="scss" scoped>
	.rankingPage {min-height: 100vh;background: linear-gradient( 36deg, #FF9BB9 0%, #FD2F55 100%, #FD2F55 100%);
		.top-wrap{display: flex;padding: 0 36rpx;align-items: center;position: sticky;top: 0;z-index: 10;
			.title{flex: 1;color: #FFFFFF;font-size: 28rpx;text-align: center;}
		}
		.tit{text-align: center;font-size: 60rpx;color: #fff;}
		.card{width: 686rpx;background: #FFFFFF;border-radius: 40rpx;margin: 140rpx auto 30rpx;position: relative;
			.rankTop{position: relative;padding: 300rpx 24rpx 0;justify-content: space-between;
				.rank{width: 194rpx;height: 356rpx;border-radius: 28rpx;padding-top: 48rpx;background: linear-gradient( 180deg, #FFD9E2 0%, #FFFFFF 100%);
					.img{width: 104rpx;height: 104rpx;margin: 0 auto 24rpx;position: relative;border-radius: 50%;
						.logo{width: 96rpx;height: 96rpx;border-radius: 50%;}
						.rank_img{position: absolute;left: 0;right: 0;bottom: -25rpx;width: 44rpx;height: 50rpx;margin: auto;}
					}
					.name{color: #333333;font-size: 28rpx;font-weight: bold;text-align: center;width: 100%;padding:0 10rpx;overflow:hidden;text-overflow:ellipsis;white-space: nowrap;}
					.num{color: #333333;font-size: 32rpx;font-weight: bold;text-align: center;margin-top: 15rpx;}
					&.rank1{top: -58rpx;position: absolute;left: 24rpx;
						.img{border: 4rpx solid #DCDCDC;}
					}
					&.rank2{top: -98rpx;position: absolute;left: 24rpx;right: 24rpx;margin: auto;
						.img{border: 4rpx solid #FFCB27;}
					}
					&.rank3{top: -58rpx;position: absolute;right: 24rpx;
						.img{border: 4rpx solid #E4AF7E;}
					}
				}
			}
		
			.table{display: flex;align-items: center;color: #777777;font-size: 28rpx;padding: 0 40rpx;
				.ranknum{flex: 0 0 122rpx;}
				.name{flex: 1;}
				.ynum{flex: 0 0 112rpx;}
			}
			.list{padding: 0 40rpx;
				.item{display: flex;align-items: center;color: #333;font-size: 28rpx;padding: 20rpx 0;
					border-bottom: 1px solid #f5f5f5;
					.ranknum{flex: 0 0 50rpx;text-align: center;}
					.info{flex: 1;display: flex;align-items: center;padding-left: 40rpx;
						.logo{width: 54rpx;height: 54rpx;border-radius: 50%;margin-right: 10rpx;background-color: #9999;}
					}
					.ynum{flex: 0 0 112rpx;text-align: center;}
				}
			}
		}
	}
</style>